<template>
	<view class="pb20">
		<view class="topBox pl30 pr30">
			<view class="header-bar"></view>
			<view class="h20"></view>
			<view class="color-f fs34 fw-500">首页</view>
			<view class="mt48">
				<u-swiper :list="list" height='300' border-radius='20' name='pic' @click='swiperBtn'></u-swiper>
			</view>
		</view>
		<view class="pl30 pr30" style="margin-top: -64rpx;">
			<notice :noticeList='noticeList' :noticeNames='noticeNames' />
		</view>
		<view class="pl30 pr30 mt30">
			<view class="flex col-center">
				<image src="../../static/image/home/sales.png" class="w40 h40 mr20"></image>
				<text class="color3 fs32 fw-700">销售活动</text>
			</view>
			<!-- 商品列表 -->
				<goodsList  :goodsList='goodsList'/>
		</view>
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex'
	import goodsList from '@/components/goods_list.vue'
	import notice from '@/components/notice.vue'
	export default {
		components:{goodsList,notice},
		computed:{...mapState('m_user',['userInfo'])},
		onShow() {
			//获取用户信息
			this.getUserData()
			//获取轮播图
			this.getIndex()
			//获取公告列表
			this.getAnnounce_list()
			//获取商品列表
			this.getGoodsList()
		},
		data() {
			return {
				list: [],
				//公告列表
				noticeList:[],
				//公告列表
				noticeNames: [],
				//商品列表
				goodsList:[]
			};
		},
		methods:{
			...mapMutations('m_user',['getUserInfo']),
			//获取用户信息
			getUserData() {
				this.getUserInfo()
			},
			//获取轮播图
			getIndex() {
				this.$api.index().then(res=>{
					this.list=res.data
				})
			},
			//点击轮播图
			swiperBtn(e) {
				console.log(e)
			},
			//获取公告列表
			getAnnounce_list() {
				this.$api.announce_list().then(res=>{
					this.noticeList=res.data.data
					this.noticeNames=res.data.data.map(item=>{
						return item.name
					})
				})
			},
			//获取商品列表
			getGoodsList() {
				this.$api.get_list().then(res=>{
					console.log(res)
					this.goodsList=res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.topBox {
		background: url(@/static/image/home/homeTopBG.png) no-repeat;
		background-size: 100% 100%;
		height: 560rpx;
	}
</style>